<template>
  <div>
    <a-empty v-if="noGroup">
      <span slot="description">暂未加入实习小组</span>
    </a-empty>

    <div class="header_wrap" v-else>
      <h3>{{ StudentGroupInfo.name }}</h3>
      <div class="header_nav">
        <div class="card-container">
          <a-tabs
            type="editable-card"
            v-model="ActiveKey"
            hide-add
            @edit="onEdit"
            animated
          >
            <a-tab-pane
              v-for="item in PanesData"
              :key="item.key"
              :closable="item.closable"
            >
              <span slot="tab">
                <a-icon :type="item.type" />
                {{ item.title }}
              </span>
              <!-- is渲染为指定的组件 add传递方法给子组件触发   -->
              <div :is="item.component" v-if="item.key == PanesActiveKey"></div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import notice from "./Notice";
import testTopic from "./TestTopic";
import exercise from "./Exercise";
export default {
  data() {
    return {
      noGroup: true,
    };
  },
  methods: {
    ...mapMutations("Group", [
      "setStudentGroupInfo",
      "setPanesActiveKey",
      "removePandesData",
    ]),
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    remove() {
      this.$confirm({
        title: `您确定要退出这次测试？`,
        content: (
          <div style="color:red;">关闭后,您本次的测试记录将不会保存</div>
        ),
        cancelText: "取消",
        okText: "确定",
        okType: "danger",
        onOk: () => {
          this.removePandesData();
        },
      });
    },
    //获取当前学生所在的小组
    getStudentGroup() {
      this.$api.StudentGetGroup().then(({ data }) => {
        if (!data.success) {
          this.noGroup = true;
        }else{
          this.noGroup=false;
        }
        this.setStudentGroupInfo(data.result);
      });
    },
  },
  computed: {
    ...mapState("Group", ["StudentGroupInfo", "PanesData", "PanesActiveKey"]),
    ActiveKey: {
      get() {
        return this.PanesActiveKey;
      },
      set(value) {
        this.setPanesActiveKey(`${value}`);
      },
    },
  },
  components: {
    notice,
    testTopic,
    exercise,
  },
  created() {
    this.getStudentGroup();
  },
};
</script>

<style lang="less" scoped>
.header_wrap {
  h3 {
    height: 60px;
    font-size: 30px;
    color: #438eb9;
    display: flex;
    align-items: center;
    padding-left: 25px;
    border-bottom: 2px solid #f3f3f3;
  }

  .header_nav {
    .card-container {
      padding: 15px;

      .ant-tabs-bar {
        border: 0;
      }

      .ant-tabs-nav-container {
        border-bottom: 1px solid #e8e8e8;
      }

      .ant-tabs-tab {
        padding: 0 10%;
        border-radius: 0;
        margin: 0 5px 0 0;
        background-color: white;
        box-sizing: border-box;
        border: 1px solid white;
        border-top: 2px solid white;
      }

      .ant-tabs-tab-active {
        border-top: 2px solid #4c8fbd;
        border-right: 1px solid #c5d0dc;
        border-left: 1px solid #c5d0dc;
      }
    }
  }
}
</style>